@import "Reset.scss";
@import "Same_Style.scss";
@import "../utils/iconfont.css";
// @import "../node_modules/css/libs/animate.css";

@function Ant_Group($w) {
  @return calc($w / 1451) * 100 + vw;
}
@function font($w) {
  @return calc($w / 1451) * 100 + vmin;
}

body {
  overflow-x: hidden;
  min-width: Ant_Group(900);
}

.pointer {
  cursor: pointer;
}
button,
input {
  outline: none;
}


.wrap {
  width: Ant_Group(1451);
  font-family: "PingFang SC";
  // 头部
  .transparentNavBar {
    @include header;
    li{
      &:nth-child(1) > a{
        color: #1677ff;
      }
    }
  }
  .whiteNavBar{
    @include header;
    nav{
      background-color: #fff;
      a{
        color: #000 !important;
      }
      & li:nth-child(1) > a{
        color: #1677ff !important;
      }
    }
  }
  // 主体
  main {
    width: 100%;
    position: relative;
    // 主体头部视频模块
    .main_video_box{
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
      .main_top_exhibition {
        width: 100%;
        height: 100%;
        background-color: #000;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        video{
          object-fit:fill;
          width: 100vw;
          height: 100vh;
          box-sizing: border-box;
        }
        // 文字/按钮区域
        .top_exhibition_content {
          display: flex;
          flex-direction: column;
          align-items: center;
          position: absolute;
          // 标题
          .top_exhibition_title {
            width: Ant_Group(617);
            margin-bottom: Ant_Group(65);
          }
          // 按钮
          .top_exhibition_btn {
            .recruit_btn {
              width: Ant_Group(160);
              height: Ant_Group(59);
              background: rgb(12, 103, 230);
              border: Ant_Group(2);
              border-right: Ant_Group(2) solid rgb(116, 174, 255);
              border-radius: Ant_Group(8) 0 0 Ant_Group(8);
              font-size: Ant_Group(16);
              font-weight: 600;
              &:last-child {
                border-right: 0;
                border-radius: 0 Ant_Group(8) Ant_Group(8) 0;
                border-left: Ant_Group(1) solid rgb(12, 103, 230);
                background-color: rgb(22, 119, 255);
              }
              & > a{
                  color: #fff;
              }
            }
          }
        }
      }
    }
    // 业务模块
    .main_business_block {
      display: flex;
      flex-direction: column;
      align-items: center;
      background-color: #fff;
      // 业务模块标题
      .business_title {
        width: Ant_Group(588);
        margin: Ant_Group(90) 0 Ant_Group(90);
      }
      // 项目容器
      .business_item_container {
        display: flex;
        margin-bottom: Ant_Group(150);
        // 项目
        .business_item {
          width: Ant_Group(240);
          height: Ant_Group(480);
          border-radius: Ant_Group(16);
          text-align: center;
          overflow: hidden;
          position: relative;
          transform: rotate(0deg);
          margin-right: Ant_Group(25);
          transition: all 0.4s ease;
          &:hover {
            width: Ant_Group(320);
          }
          &:hover img {
            transform: translate(0);
          }
          &:hover > i {
            transition: all 0.3s ease;
            transform: rotate(180deg);
          }
          &:hover > h2 {
            bottom: 86%;
          }
          &:hover > p {
            top: 23%;
            transition: all 0.9s ease 0.2s;
            opacity: 1;
            // margin: 0 Ant_Group(20);
          }
          &:hover > .mask {
            background-color: rgba(22, 119, 255, 0.7);
          }
          img {
            width: auto;
            height: 100%;
            transform: translate(Ant_Group(-40));
            transition: all 0.4s ease;
          }
          h2 {
            width: 100%;
            position: absolute;
            bottom: Ant_Group(40);
            justify-content: center;
            // left:calc(50% - Ant_Group(44));
            font-size: Ant_Group(22);
            color: #fff;
            font-weight: bold;
            transition: all 0.4s;
          }
          p {
            width: 80%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%);
            font-size: Ant_Group(14);
            color: #fff;
            opacity: 0;
            text-align: justify;
          }
          i {
            position: absolute;
            bottom: Ant_Group(16);
            color: #fff;
            font-size: Ant_Group(16);
            left: calc(50% - Ant_Group(8));
          }
          .mask {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
          }
        }
      }
    }
    // 这就是蚂蚁模块
    .main_company_overview {
      width: 100%;
      height: Ant_Group(1200);
      display: flex;
      flex-direction: column;
      align-items: center;
      background: rgba(246, 248, 250, 1);
      position: relative;
      // 定位背景图
      .company_overview_bagImg {
        width: Ant_Group(300);
        position: absolute;
        top: 0;
        left: Ant_Group(-70);
        transform: translateY(-50%);
      }
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(64);
      }
      // 项目容器
      .company_overview_container {
        display: flex;
        flex-wrap: wrap;
        margin-left: Ant_Group(182);
        // 项目
        .company_overview_item {
          width: Ant_Group(352);
          height: Ant_Group(412);
          border-radius: Ant_Group(12);
          padding: Ant_Group(40);
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          background-color: #fff;
          margin: 0 Ant_Group(16) Ant_Group(16) 0;
          box-shadow: rgb(216 218 224 / 0%) Ant_Group(-10) Ant_Group(10);
          transition: all 0.5s;
          &:hover {
            transform: translateY(Ant_Group(-5));
            box-shadow: rgb(216 218 224 / 50%) Ant_Group(-10) Ant_Group(10)
              Ant_Group(40) 0;
          }
          // 项目图片容器
          .img_container {
            width: Ant_Group(100);
            margin-top: Ant_Group(5);
          }
          // 项目文本
          p {
            font-size: Ant_Group(16);
            color: rgba(102, 102, 102, 1);
            font-weight: 400;
            line-height: Ant_Group(25);
            &:first-of-type {
              font-size: Ant_Group(25);
              font-weight: bold;
              color: #000;
              margin: Ant_Group(22) 0 Ant_Group(26);
            }
          }
        }
      }
    }
    // 薪酬与福利
    .main_remunerationBenefits {
      width: 100%;
      height: Ant_Group(882);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(75);
      }
      // 薪酬福利内容
      .remunerationBenefits_content {
        width: Ant_Group(1088);
        height: Ant_Group(642);
        border-radius: Ant_Group(12);
        overflow: hidden;
        position: relative;
        // 左边小圆
        .left_circular {
          width: Ant_Group(145);
          position: absolute;
          left: Ant_Group(108);
          bottom: Ant_Group(-50);
          z-index: -1;
        }
        // 右边小圆
        .right_circular {
          width: Ant_Group(378);
          position: absolute;
          top: Ant_Group(-190);
          right: Ant_Group(-190);
          transform: rotate(220deg);
        }
        // 福利盒子
        .welfare_box {
          width: 100%;
          height: 100%;
          position: relative;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          // 福利每一项目
          .welfare_item {
            width: Ant_Group(362);
            position: relative;
            overflow: hidden;

            &::before {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-image: linear-gradient(134deg, #1677ff, #00a3ff);
              opacity: 0;
              transition: opacity 0.3s ease;
            }
            &::after {
              content: "";
              display: block;
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              background-image: linear-gradient(
                180deg,
                rgba(0, 62, 149, 0) 51%,
                #003e95
              );
              opacity: 0.5;
              transition: opacity 0.3s ease;
            }
            &:hover::before {
              opacity: 0.7;
            }
            // 文本容器
            .text_container {
              width: 100%;
              padding: 0 Ant_Group(32) Ant_Group(32);
              height: Ant_Group(150);
              box-sizing: border-box;
              text-align: left;
              color: #fff;
              position: absolute;
              transition: all 0.4s ease;
              z-index: 1;
              & > h2 {
                margin: 0 0 Ant_Group(15);
                font-size: Ant_Group(22);
              }
              & > p {
                position: relative;
                top: Ant_Group(24);
                font-size: Ant_Group(14);
                line-height: Ant_Group(22);
                opacity: 0;
                overflow: hidden;
              }
            }
            &:nth-child(1),
            &:nth-child(7) {
              width: Ant_Group(362);
              & > .text_container {
                top: Ant_Group(253);
              }
            }
            &:nth-child(2),
            &:nth-child(3),
            &:nth-child(5),
            &:nth-child(6),
            &:nth-child(8),
            &:nth-child(9) {
              width: Ant_Group(362);
              height: Ant_Group(160);
              & > .text_container {
                top: Ant_Group(104);
              }
            }
            &:nth-child(4) {
              width: Ant_Group(725);
              position: absolute;
              top: Ant_Group(161);
              right: 0;
              & > .text_container {
                top: Ant_Group(103);
              }
            }
            &:nth-child(6) {
              position: absolute;
              bottom: 0;
              left: 0;
            }
            &:nth-child(9) {
              position: absolute;
              bottom: 0;
              right: 0;
            }
            &:hover > .text_container {
              top: Ant_Group(32);
            }
            &:hover > .text_container > p {
              top: 0;
              opacity: 1;
              transition: all 0.4s ease 0.3s;
            }
          }
        }
      }
    }
    // 使命和愿望
    .main_vision {
      width: Ant_Group(1088);
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(75);
      }
      // 愿景内容区
      .vision_content {
        width: 100%;
        position: relative;
        margin-bottom: Ant_Group(120);
        // 左边内容块
        .vision_left_content {
          width: Ant_Group(394);
          height: Ant_Group(450);
          border-radius: Ant_Group(16);
          position: absolute;
          left: 0;
          top: Ant_Group(100);
          padding: Ant_Group(64) Ant_Group(32) Ant_Group(72);
          background-color: rgba(255, 255, 255, 0.97);
          box-shadow: rgb(216 218 224 / 50%) -10px 10px 40px 0px;
          box-sizing: border-box;
          // svg图片
          .svg_content {
            width: Ant_Group(54);
            position: absolute;
            top: Ant_Group(-22);
          }
          p {
            font-size: Ant_Group(14);
            line-height: Ant_Group(22);
            color: rgb(102, 102, 102);
            font-weight: 400;
            &:first-of-type {
              margin-bottom: Ant_Group(20);
            }
          }
        }
        // 中间内容块
        .vision_middle_content {
          width: Ant_Group(536);
          height: Ant_Group(676);
          border-radius: Ant_Group(16);
          margin-left: Ant_Group(330);
          overflow: hidden;
        }
        // 右边内容块
        .vision_right_content {
          width: Ant_Group(254);
          height: Ant_Group(314);
          border-radius: Ant_Group(16);
          position: absolute;
          bottom: Ant_Group(48);
          right: 0;
          overflow: hidden;
        }
        .vision_circular_img {
          width: Ant_Group(150);
          position: absolute;
          bottom: Ant_Group(16);
          right: Ant_Group(-75);
          z-index: -1;
        }
      }
    }
    // 回响人物志
    .main_people_introduction {
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(75);
      }
      // 人物卡片
      .people_introduction_card {
        width: Ant_Group(1137);
        height: Ant_Group(604);
        padding: Ant_Group(40) Ant_Group(25) 0;
        position: relative;
        & > button {
          @include bannerBtn;
          &:nth-of-type(1) {
            left: Ant_Group(-79);
            top: 40%;
            transform: translateY(-50%);
          }
          &:nth-of-type(2) {
            right: Ant_Group(-79);
            top: 40%;
            transform: translateY(-50%);
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.3);
          }
        }
        // 卡片盒子
        .cardBox {
          width: 100%;
          height: 100%;
          overflow: hidden;
          // 卡片内容区域
          ul {
            width: 100%;
            display: flex;
            transform: translateX(-100%);
            // 卡片容器
            li {
              flex-shrink: 0;
              width: 50%;
              display: flex;
              justify-content: center;
              .card_item_container {
                width: Ant_Group(518);
                height: Ant_Group(448);
                border-radius: Ant_Group(16);
                overflow: hidden;
                box-shadow: 0px 4px 20px 0 rgb(0 51 153 / 8%);
                // 卡片项目内容
                .card_item_content {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  &:hover > .img_container ~ .text_container > p {
                    transform: translateY(0);
                  }
                  &:hover > .img_container ~ .text_container > .text_item {
                    transform: translateY(0);
                  }
                  &:hover > .img_container ~ .text_container > .text_item p {
                    opacity: 1;
                  }
                  &:hover
                    > .img_container
                    ~ .text_container
                    > .text_item
                    > .text_item_content
                    > span {
                    transform: translateY(0);
                    opacity: 1;
                  }
                  :hover button {
                    opacity: 0;
                    transform: translateY(Ant_Group(-16));
                    transition: all 0.3s ease;
                  }
                  // 图片容器
                  .img_container {
                    width: 100%;
                    height: Ant_Group(390);
                    overflow: hidden;
                    & > img {
                      width: 100%;
                    }
                  }
                  // 文本容器
                  .text_container {
                    width: 100%;
                    height: Ant_Group(234);
                    position: absolute;
                    bottom: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    transition: all 0.3s ease;
                    // 职业
                    & > p {
                      position: absolute;
                      top: Ant_Group(-40);
                      left: Ant_Group(16);
                      padding: Ant_Group(3) Ant_Group(20);
                      color: #fff;
                      font-size: Ant_Group(12);
                      background-color: rgba(0, 0, 0, 0.3);
                      height: Ant_Group(24);
                      line-height: Ant_Group(24);
                      text-align: center;
                      border-radius: Ant_Group(6);
                      transform: translateY(Ant_Group(84));
                      transition: all 0.3s ease;
                    }
                    .text_item {
                      padding: Ant_Group(24) Ant_Group(16) 0;
                      background-color: rgba(255, 255, 255, 0.96);
                      transform: translateY(Ant_Group(84));
                      transition: all 0.3s ease;
                      box-sizing: border-box;
                      overflow: hidden;
                      // 文本内容
                      .text_item_content {
                        width: 100%;
                        height: Ant_Group(130);
                        padding: 0 Ant_Group(8);
                        box-sizing: border-box;
                        &:hover {
                          overflow: auto;
                        }
                        h2 {
                          font-size: Ant_Group(20);
                          font-weight: 500;
                          color: #333;
                          margin: 0;
                          height: Ant_Group(30);
                          line-height: Ant_Group(30);
                        }
                        & > p {
                          margin: Ant_Group(8) 0;
                          font-size: Ant_Group(14);
                          font-weight: 400;
                          color: rgb(102, 102, 102);
                          line-height: Ant_Group(22);
                          padding: 0;
                          transform: translateY(Ant_Group(16));
                          opacity: 0;
                          transition: all 0.3s ease;
                        }
                      }
                    }
                  }
                  // // 底部人物信息栏
                  .people_info_bar {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    .people_info {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 0 Ant_Group(24) Ant_Group(16);
                      .job_and_img {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .small_img_container {
                          width: Ant_Group(40);
                          height: Ant_Group(40);
                          margin-right: Ant_Group(16);
                          border-radius: 50%;
                          overflow: hidden;
                          & > img {
                            width: auto;
                            height: 100%;
                            transform: translate(-8px);
                          }
                        }
                        p {
                          font-size: Ant_Group(16);
                          color: rgba(153, 153, 153, 1);
                          font-weight: 400;
                        }
                      }
                      button {
                        color: #1677ff;
                        background-color: transparent;
                        border: none;
                        display: flex;
                        align-items: center;
                        i {
                          font-weight: bolder;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    // 环境
    .main_environment {
      width: 100%;
      height: Ant_Group(798);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      position: relative;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: 0 0 Ant_Group(64);
      }
      .main_environment_content {
        width: Ant_Group(1088);
        // height: Ant_Group(640);
        border-radius: Ant_Group(12);
        position: relative;
        overflow: hidden;
        ul {
          width: 100%;
          display: flex;
          transition: all 1s ease;
          li {
            width: 100%;
            flex-shrink: 0;
          }
        }
        .environmentBtn {
          @include bannerBtn;
          &:nth-of-type(1) {
            top: 50%;
            left: Ant_Group(40);
            transform: translateY(-50%);
          }
          &:nth-of-type(2) {
            top: 50%;
            right: Ant_Group(40);
            transform: translateY(-50%);
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.3);
          }
          & > i{
            pointer-events: none;
          }
        }
        .environment_info_container {
          position: absolute;
          top: Ant_Group(530);
          left: 0;
          display: flex;
          align-items: center;
          width: 100%;
          color: #fff;
          font-weight: 400;
          font-size: 14;
          .left_page {
            width: Ant_Group(120);
            font-size: Ant_Group(24);
            color: hsla(0, 0%, 100%, 0.6);
            line-height: Ant_Group(36);
            text-align: center;
            position: relative;
            span {
              font-size: Ant_Group(40);
              color: #fff;
              font-weight: 500;
              line-height: Ant_Group(54);
            }
            &::after {
              content: "";
              display: block;
              width: Ant_Group(1);
              background-color: hsla(0, 0%, 100%, 0.6);
              position: absolute;
              height: Ant_Group(40);
              top: Ant_Group(7);
              right: 0;
            }
          }
          .right_text {
            flex: 1;
            margin-bottom: Ant_Group(7);
            padding: 0 Ant_Group(32) 0 Ant_Group(29);
            line-height: Ant_Group(25);
            p {
              font-size: Ant_Group(14);
            }
          }
        }
        .environmentBtn_select {
          width: 100%;
          .space {
            width: 100%;
            display: flex;
            & > p {
              flex: 1;
              height: Ant_Group(64);
              line-height: Ant_Group(64);
              text-align: center;
              background-color: #000;
              color: #fff;
              &:first-child{
                background: linear-gradient(134deg, #1677ff, #00a3ff);
              }
              &:hover {
                background: linear-gradient(134deg, #1677ff, #00a3ff);
              }
            }
          }
        }
      }
    }
    .main_remarks {
      width: Ant_Group(1088);
      display: flex;
      justify-content: flex-end;
      margin: Ant_Group(16) auto Ant_Group(110);
      font-size: Ant_Group(14);
      span {
        &:first-child {
          color: #1677ff;
        }
      }
    }
    .main_footer_circulr {
      width: Ant_Group(260);
      position: absolute;
      left: Ant_Group(-80);
      bottom: Ant_Group(-50);
      transform: rotate(60deg);
    }
    .main_footer_block {
      width: Ant_Group(400);
      transform: rotate(180deg);
      position: absolute;
      left: Ant_Group(-250);
      bottom: Ant_Group(-100);
    }
  }
  // 底部
  footer {
    @include footer;
  }
  .backTop {
    @include backTop;
  }
}
